<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Simple setInterval clock</title>
    <style>
      p {
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <p class="clock"></p>
    <button class="start">start</button>
    <button class="stop">stop</button>
    <button class="reset">reset</button>
    <script>
      let start = document.querySelector('.start');
      let stop = document.querySelector('.stop');
      let reset = document.querySelector('.reset');
      let clock = document.querySelector('.clock');

      let startTime = [0, 0, 0];
      let createClock;

      displayTime(0, 0, 0);

      start.onclick = function() {
        startTime = new Date();
        start.disabled = true;

        createClock = setInterval(update, 1000);
      }

      stop.onclick = function() {
        clearInterval(createClock);
      }

      reset.onclick = function() {
        start.disabled = false;
        clearInterval(createClock);
        displayTime(0, 0, 0);
      }

      function update() {
        let date = new Date();
        let diffDate = Math.floor((date - startTime)/1000);
        let diffHour = Math.floor(diffDate/3600);
        diffDate %= 3600;
        let diffMinute = Math.floor(diffDate/60);
        diffDate %= 60;
        let diffSecond = diffDate;

        displayTime(diffHour, diffMinute, diffSecond);
      }

      function displayTime(hour, minute, second) {
        let padding = num => {
          if (num < 10) {
            return '0' + num;
          }
          return num.toString();
        }
        hour = padding(hour);
        minute = padding(minute);
        second = padding(second);

        clock.textContent = hour + ':' + minute + ':' + second;
      }
    </script>
  </body>
</html>
